{{! -------------------------------------------------------------------------- }}
{{! Copyright 2002-2023, OpenNebula Project, OpenNebula Systems                }}
{{!                                                                            }}
{{! Licensed under the Apache License, Version 2.0 (the "License"); you may    }}
{{! not use this file except in compliance with the License. You may obtain    }}
{{! a copy of the License at                                                   }}
{{!                                                                            }}
{{! http://www.apache.org/licenses/LICENSE-2.0                                 }}
{{!                                                                            }}
{{! Unless required by applicable law or agreed to in writing, software        }}
{{! distributed under the License is distributed on an "AS IS" BASIS,          }}
{{! WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.   }}
{{! See the License for the specific language governing permissions and        }}
{{! limitations under the License.                                             }}
{{! -------------------------------------------------------------------------- }}

<div class="text-center provision_info_vm_loading">
  <span class="fa-stack fa-5x"> <i class="fas fa-cloud fa-stack-2x"></i> <i class="fa  fa-spinner fa-spin fa-stack-1x fa-inverse"></i>
  </span>
  <br>
  <br>
  <span></span>
</div>
<div class="provision_info_vm">
  <div class="row">
    <div class="provision_confirm_action large-12 large-centered columns"></div>
  </div>
  <div class="row">
    <div class="large-4 medium-5 small-12 columns">
      <ul class="provision-pricing-table menu vertical">
        <span class="provision-pricing-table_vm_info">
        </span>
        <li class="provision-bullet-item">
          <hr>
        </li>
        <li class="provision-bullet-item-buttons">
          <ul class="menu provision_action_icons without-link">

            <ul class="dropdown-menu-css">
              <li style="margin-bottom: 0;">
                <div>
                  <button href="#" class="button radius provision_remote_button tip-top">
                    <i class="fas fa-fw fa-lg fa-desktop"/>
                  </button>
                </div>
              </li>
              <li class="menu-hide" style="margin: 0; width: max-content;">
                <ul>
                  <!-- noVNC button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_vnc_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/noVNC.png"/></div> VNC
                    </a>
                  </li>
                  <!-- SPICE button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_spice_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/spice.png"/></div> SPICE
                    </a>
                  </li>
                  <!-- VMRC button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_vmrc_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/vmrc.png"/></div> VMRC
                    </a>
                  </li>
                  <!-- RDP button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_rdp_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/windows.png"/></div> RDP
                    </a>
                  </li>
                  <!-- Virt Viewer File button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_wfile_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/virtviewer.png"/></div> Virt Viewer
                    </a>
                  </li>
                  <!-- Guacamole VNC button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_guac_vnc_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div> VNC
                    </a>
                  </li>
                  <!-- Guacamole RDP button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_guac_rdp_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div> RDP
                    </a>
                  </li>
                  <!-- Guacamole SSH button -->
                  <li class="display-list margin-tlr-1">
                    <a href="#" class="provision_guac_ssh_button">
                      <div class="remote-logo-dropdown"><img src="images/remote_console/guacamole-alt.png"/></div> SSH
                    </a>
                  </li>
                </ul>
              </li>
            </ul>

            {{#isTabActionEnabled "provision-tab" "VM.save_as_template"}}
            <li>
              <button href"#" title="{{tr "The disks of the Virtual Machine will be saved in a new Image"}}" class="button radius success provision_save_as_template_confirm_button tip-top">
                <i class="fas fa-fw fa-lg fa-save"/>
              </button>
            </li>
            <li>
              <button title="{{tr "You have to power-off the virtual machine first"}}" class="button radius white provision_save_as_template_confirm_button_disabled disabled tip-top" disabled>
                <i class="fas fa-fw fa-lg fa-save"/>
              </button>
            </li>
            {{/isTabActionEnabled}}
            <li>
            <li>
              <button href"#" title="{{tr "Terminate"}}" class="button radius alert provision_terminate_confirm_button tip-top">
                <i class="fas fa-fw fa-lg fa-trash-alt"/>
              </button>
            </li>
            <li>
              <button href"#" title="{{tr "Power off"}}" class="button radius secondary provision_poweroff_confirm_button tip-top">
                <i class="fas fa-fw fa-lg fa-power-off"/>
              </button>
            </li>
            <li>
              <button href"#" title="{{tr "Power off"}}" class="button radius secondary provision_undeploy_confirm_button tip-top">
                <i class="fas fa-fw fa-lg fa-power-off"/>
              </button>
            </li>
            {{#isTabActionEnabled "provision-tab" "VM.resume"}}
            <li>
              <button href"#" title="{{tr "Power on"}}" class="button radius secondary provision_resume_button tip-top">
                <i class="fas fa-fw fa-lg fa-play"/>
              </button>
            </li>
            {{/isTabActionEnabled}}
            <li>
              <button href"#" title="{{tr "Reboot"}}" class="button radius secondary provision_reboot_confirm_button tip-top">
                <i class="fas fa-fw fa-lg fa-redo-alt"/>
              </button>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="large-8 medium-7 small-12 columns">
      <div class="row">
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "CPU"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_cpu_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_cpu_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Memory"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_memory_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_memory_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net RX"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_rx_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_rx_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12  columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net TX"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_tx_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_tx_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12  columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net Download Speed"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_rx_speed_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_rx_speed_legend"></div>
          </div>
        </div>
        <div class="large-4 medium-6 small-12 columns">
          <div class="row">
            <div class="large-12 columns">
              <span class="subheader">
                {{tr "Net Upload Speed"}}
              </span>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <div class="large-12 columns centered graph_provision vm_net_tx_speed_provision_graph"></div>
            </div>
          </div>
          <div class="row graph_legend">
            <div class="large-12 columns centered vm_net_tx_speed_legend"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-12 columns provision-sunstone-vcenter">
      <table class="provision-sunstone-vcenter-list"></table>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="large-12 columns provision-sunstone-info"></div>
  </div>
</div>
